import React, {useState, useEffect} from 'react';
import  CardList  from './CardList';
import useWindowWidth from '@/hooks/event/use-window-width';
import appService from "@/api/services/appService";
import { message } from 'antd';
import { useParams } from '@/router/hooks';
import { useConfig, useConfigActions } from '@/store/configStore';




export default function EmptyCards({ emitCard }) {
  const { isPc } = useWindowWidth();
  const [messageApi, contextHolder] = message.useMessage();
  const { title } = useConfig();

  const [demoData, setDemoData] = useState([])
  const [subtitle, setSubtitle] = useState('');
  const { id } = useParams();
  const { fetchAppInfo } = useConfigActions();

  useEffect(()=>{
    id && appService.brandingDetail(id, 'app')
      .then((res)=>{
        console.log(res)
        if (res?.display_name != title) {
          fetchAppInfo(id);
        }
        setSubtitle(res?.subtitle);
        setDemoData({
          about: '热门问题',
          title:res?.hot_subtitle,
          list: res?.hot_issues
        })
      })
      .catch((error)=>{
        console.log(error)
      })
  }, [])

  // const demoData={
  //   about:"热门问题",
  //   title:"大家都在关心的问题",
  //   list:[
  //     {
  //       id:5,
  //       details:"目前支持的问答功能？"
  //     },
  //     // {
  //     //   id:1,
  //     //   details:"办公室怎么上网？"
  //     // },
  //     {
  //       id:2,
  //       details:"怎么登陆学校邮箱？"
  //     },
  //     {
  //       id:3,
  //       details:"校园卡丢失了怎么办？"
  //     },
  //     {
  //       id:4,
  //       details:"校园网怎么缴费？"
  //     },
  //   ]
  // };

  // const demoData1={
  //   about:"猜你想问",
  //   title:"大家都在关心的问题",
  //   list:[
  //     {
  //       id:1,
  //       details:"2025年奖学金的申请标准有哪些？ "
  //     },
  //     {
  //       id:2,
  //       details:"国际财金专业评选优秀毕业生的条..."
  //     },
  //     {
  //       id:3,
  //       details:"新校区宿舍管理条例？"
  //     },
  //     {
  //       id:4,
  //       details:"明年是否有交换生申请名额？具体..."
  //     },
  //     {
  //       id:5,
  //       details:"今年各个专业招生情况？"
  //     },{
  //       id:6,
  //       details:"2024年和2023年毕业生就业率是否..."
  //     },
  //   ]
  // };
  
  // const demoData2={
  //   about:"校园实时",
  //   title:"我们校园的实时热门资讯",
  //   list:[
  //   ]
  // };

  // const demoData3={
  //   about:"便利工具",
  //   title:"一起修炼成为专业论文高手吧",
  //   list:[
  //   ]
  // };

  return (
    <div style={{ display: 'flex', alignItems: 'center', flexDirection: 'column' }}>
      {title && (
        <div style={{ fontSize: '20px', fontWeight: 'bold', marginTop: '20px' }}>
          您好，{title}为您服务
        </div>
      )}
      {subtitle && (
        <div style={{ fontSize: '16px', marginTop: '4px', color: '#8A8EA7' }}>{subtitle}</div>
      )}
      <div
        style={{
          // border:'1px solid green',
          marginTop: '30px',
          width: '100%',
          display: 'flex',
          justifyContent: 'center',
        }}
      >
        {!isPc ? (
          demoData?.list?.length > 0 && (
            <div
              style={{
                border: '1px solid #ffffff',
                width: !isPc ? '100%' : '32.5%',
                background: 'linear-gradient(to bottom right, #FFFBFF 0%, #E0E2F9 100%)',
                borderRadius: '26px',
                padding: '15px 30px',
              }}
            >
              <CardList demoData={demoData} emitCard={emitCard} />
            </div>
          )
        ) : (
          <>
            {demoData?.list?.length > 0 && (
              <div
                style={{
                  border: '1px solid #ffffff',
                  width: !isPc ? '100%' : '100%',
                  background: 'linear-gradient(to bottom right, #FFFBFF 0%, #E0E2F9 100%)',
                  borderRadius: '26px',
                  padding: '30px',
                }}
              >
                <CardList demoData={demoData} emitCard={emitCard} />
              </div>
            )}
            {/* <div style={{ 
              border:'1px solid #ffffff',
              width:'32.5%',
              background:'linear-gradient(to bottom right, #FFFBFF 0%, #E0E2F9 100%)',
              borderRadius:'26px',
              padding:'30px'
              }}>
              <CardList demoData={demoData1} emitCard={emitCard}/>
            </div>
            <div style={{width:'32.5%',display:'flex',flexDirection:'column',justifyContent:'space-between',}}>
              <div style={{ 
                border:'1px solid #ffffff',
                height:'183px',
                background:'linear-gradient(to bottom right, #FFFBFF 0%, #E0E2F9 100%)',
                borderRadius:'26px',
                padding:'30px'
              
                }}><CardList demoData={demoData2} emitCard={emitCard}/></div>
              <div style={{
                border:'1px solid #ffffff',
                height:'183px',
                background:'linear-gradient(to bottom right, #FFFBFF 0%, #E0E2F9 100%)',
                borderRadius:'26px',
                padding:'30px'
                }}><CardList demoData={demoData3} emitCard={emitCard}/></div>
            </div> */}
          </>
        )}
      </div>
    </div>
  );
}